<template>
  <view class="u-page" @click.stop="viewEvent">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in indexList" :key="index">
        <view class="item" @click="onItemClick(item, index)">
          <view class="item-title-box">
            <view style="max-width: 600rpx">
              <view>
                <u--input
                  style="padding: 0"
                  v-if="activeIndex === item.id && updateVal"
                  :placeholder="item.name"
                  border="bottom"
                  clearable
                  :focus="true"
                  v-model="updateItem"
                  @confirm="(value) => sendUpdate(item, value)"
                  @blur="(value) => sendUpdate(item, value)"
                ></u--input>
                <view class="item-title" v-else>
                  {{ item.name }}
                </view>
              </view>
            </view>

            <view class="dotPositon">
              <zb-tooltip
                content="Bottom Center"
                :placement="index == 0 ? 'bottom-end' : 'left'"
                ref="tooltip"
              >
                <view slot="content">
                  <view>
                    <view class="itemGruop" @click="setName(item, index)">
                      <u-icon
                        name="edit-pen-fill"
                        color="#fff"
                        style="margin-right: 12rpx"
                      ></u-icon>
                      <text class="icontxt">重命名</text>
                    </view>
                    <u-line margin="20rpx 0 0 0"></u-line>
                    <view class="itemGruop">
                      <u-icon name="share-square" color="#fff" style="margin-right: 12rpx"></u-icon>
                      <button open-type="share" class="shareBtn" @click="jumpToWeb(item)">
                        转发
                      </button>
                    </view>
                    <u-line margin=" 0 0 20rpx 0"></u-line>
                    <view class="itemGruop" @click.stop="onDeleteItem(item, index)">
                      <u-icon name="trash" color="#fff" style="margin-right: 12rpx"></u-icon>

                      <text class="icontxt">删除</text>
                    </view>
                  </view>
                </view>
                <view
                  class="moreDot"
                  @click="closeTip(index)"
                  :style="{
                    backgroundColor:
                      activeIndex == index ? 'rgba(209, 218, 255, 1)' : 'rgba(235, 235, 235, 1)',
                  }"
                >
                  <u-icon
                    name="more-dot-fill"
                    :color="
                      activeIndex == index ? 'rgba(10, 63, 255, 1)' : 'rgba(158, 158, 158, 1)'
                    "
                  ></u-icon>
                </view>
              </zb-tooltip>
            </view>
          </view>
          <view class="item-bottom">
            <text class="item-text">{{ item.total }}条对话</text>
            <text class="item-text">{{ item.created_at | date('yyyy-mm-dd hh:MM:ss') }}</text>
          </view>
        </view>
      </u-list-item>
    </u-list>
    <u-modal
      :show="showModal"
      :content="content"
      @cancel="showModal = false"
      @confirm="onDeleteConfirm"
      showCancelButton
    ></u-modal>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  options: {
    styleIsolation: 'shared',
  },
  data() {
    return {
      indexList: [],
      updateVal: false,
      updateItem: '',
      selectItem: {},
      showModal: false,
      page: { page: 1, limit: 10 },
    }
  },
  computed: {
    ...mapState({
      chatList: (state) => {
        console.log('state.chat.chatListAI------', state.chatAI.saveconversationList)
        return state.chatAI.saveconversationList
      },
      activeIndex: (state) => state.chat.activeChatIndex,
    }),
    computedShow(index) {
      return this.activeIndex == index ? true : false
    },
    content() {
      return `确定要删除聊天记录: ${this.selectItem.name} 吗？`
    },
  },
  async onLoad() {
    this.indexList = await this.$store.dispatch('IconversationList', this.page)
  },
  methods: {
    onItemClick(item, index) {
      console.log('---------------', item)
      this.updateItem = ''
      if (this.updateVal) return

      this.$store.commit('CLEARLIST')
      setTimeout(async () => {
        // 点击了之后首选获取聊天记录
        this.$store.commit('SAVEITEM', item)
        this.$store.commit('SETSHAREID', item.id)
        this.$store.commit('SETSHARENAMENAME', item.name)
        await this.$store.dispatch('IchatMessageList', { conversation_id: item.id })
        this.$store.commit('SETNEWID', item.id)
        this.$store.commit('setActiveChatIndex', index)
        this.$store.commit('setShowHistory', false)
        // 这里就不止是把它为false了, 是要跳转
        uni.navigateTo({
          url: '/pages/home/home',
        })
      })
    },
    async scrolltolower() {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      })
      console.log('触底')
      if (this.indexList.length) this.page.page = this.page.page + 1
      // uni.showLoading({
      //   title: '加载中',
      // })
      const res = await this.$store.dispatch('IconversationList', this.page)
      this.indexList = [...this.indexList, ...res]
      uni.hideLoading()
      // uni.hideLoading()
    },
    async sendUpdate(item, value) {
      this.$store.commit('setActiveChatIndex', -1)
      console.log(value)
      if (item.name == value || !value || !this.updateVal) return
      this.updateVal = false

      await this.$store.dispatch('IconversationUpdate', {
        id: item.id,
        name: value,
      })
      // 需不需要重置先不急
      this.indexList = await this.$store.dispatch('IconversationList', this.page)
      // 修改
    },
    setName(item, index1) {
      this.$store.commit('setActiveChatIndex', item.id)
      this.updateVal = true
      this.$refs.tooltip.find((item, index) => {
        if (index1 == index) {
          item.close()
          return
        }
      })
    },
    onDeleteItem(item, index) {
      this.selectItem = item
      this.showModal = true
    },
    dotEvent(index) {
      console.log(this.$refs.tooltip13[index])
      this.$refs.tooltip[index].isShow = true
    },
    closeTip(index1) {
      this.$store.commit('setActiveChatIndex', index1)
      console.log('触发', this.$refs.tooltip)
      this.$refs.tooltip.forEach((item, index) => {
        if (index1 !== index) {
          item.close()
        }
      })
    },
    async onDeleteConfirm() {
      console.log('触发')
      try {
        await this.$store.dispatch('IconversationDelete', { id: this.selectItem.id })
        uni.showToast({
          title: '删除成功',
          icon: 'none',
        })

        this.$refs.tooltip.forEach((item, index) => {
          item.close()
        })
        await this.$store.dispatch('IconversationList')
      } catch (error) {
        uni.showToast({
          title: '删除失败',
          icon: 'error',
        })
      }
      this.showModal = false
    },
    viewEvent() {
      if (this.activeIndex < 0) return
      this.$refs.tooltip.forEach((item) => {
        item.close()
      })
      this.$store.commit('setActiveChatIndex', -1)
    },
    async jumpToWeb(item) {
      // 点击这里的转发, 需要传conversation_id会话ID
      this.$store.commit('SETSHARENAMENAME', item.name)
      this.$store.commit('SETHISTORY', {
        name: item.name,
        id: item.id,
      })
    },
  },
}
</script>
<style scoped lang="scss">
.u-page {
  background-color: rgba(246, 247, 249, 1);
  padding: 0 32rpx 32rpx 32rpx;
}
.shareBtn {
  color: #fff;
  font-size: 28rpx;
  border: none;
  margin-left: 12rpx;
  border-radius: none;
  padding: 0;
  line-height: none;
  background: none;
}
.item-title-box {
  display: flex;
  justify-content: left;

  .item-title {
    font-size: 32rpx;
    font-weight: 700;
    // flex: 1;
    color: rgba(51, 51, 51, 1);
    margin-right: 20rpx;
  }
}
.dotPositon {
  position: absolute;
  top: 0;
  right: 0;
}
.moreDot {
  color: rgba(158, 158, 158, 1);
  border-radius: 0px 20rpx 0px 20rpx;
  background: rgba(235, 235, 235, 1);
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;

  .item-text {
    color: rgb(166, 166, 166);
    font-size: 24rpx;
  }
}
.item {
  padding: 21rpx 28rpx;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  position: relative;
}
.itemGruop {
  width: 128rpx;
  display: flex;
  // padding-left: 10rpx;
  box-sizing: border-box;
  justify-content: left;
  font-size: 28rpx;
  .icontxt {
    margin-left: 10rpx;
  }
}
::v-deep .uni-scroll-view-content {
  margin-top: 32rpx;
}
::v-deep .u-list {
  height: 94vh !important;
}
</style>
